<template>
  <div class="ele-body">
    <div class="print">
      <a-button type="primary" @click="print" size="large">打印</a-button>
    </div>
    <div ref="printRef">
      <div class="layui-row header-container">
        <div
          style="font-size:26px;font-weight: bold;display:flex;flex-flow: row nowrap;justify-content:center;margin:0 auto;">
          <div style="">{{ loginUser.organizationFullName }}</div>
          <div style="margin-left:20px;">销售单</div>
        </div>
      </div>
      <div class="layui-row header-container marginTop">
        <div style="width:300px; position:absolute;left:0px;top:0px;">销售单号:{{ sellForm.code }}</div>
        <div style="width:250px; position:absolute;right:50px;top:0px;">销售单日期:{{ sellForm.selltime }}</div>
      </div>
      <div class="layui-row header-container">
        <div style="width:300px; position:absolute;left:0px;top:0px;">客户:{{ sellForm.supplier }}</div>
      </div>
      <table class="table" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <td>产品名称</td>
            <td>规格</td>
            <td>长度</td>
            <td>数量</td>
            <td>重量</td>
            <td>单价</td>
            <td>金额</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in sellSonList.a" :key="index">
            <td>{{ item.productname }}</td>
            <td>{{ item.specification }}</td>
            <td>{{ item.lengths }}</td>
            <td>{{ item.num }}</td>
            <td>{{ item.actualweight }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.totalprice }}</td>
          </tr>
          <tr v-for="(item, index) in 7 - (sellSonList.a.length > 6 ? 7 : sellSonList.a.length)" :key="index">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td style="height: 18px;line-height: 18px;">总计</td>
            <td colspan="5" style="padding: 10px;text-align: left;height: 18px;line-height: 18px;">
              金额合计大写:<span id="priceUpper">{{ smallToBig(sellForm.total) }}</span>
            </td>
            <td style="padding: 10px;height: 18px;line-height: 18px;">￥{{ sellForm.total }}</td>
          </tr>
        </tbody>
      </table>
      <table class="table" cellspacing="0" cellpadding="0" style="margin:0px auto;">
        <tbody>
          <tr>
            <td style="border-top:0px;width:535px;text-align:left;padding-left:5px;font-size: 12px;line-height: 20px;">
              1、货物数量请由需方或需方代表当面点清,出库一律不负责.<br />
              2、使用前对货物进行检验确定,符合要求后方可使用.<br />
              3、如上述产品确有质量问题,需方应在一周内书面向供方提出质量异议,否则视为合格.<br />
              4、发票请于当月开清,此单盖章有效.<br />
              5、如发生纠纷,由供方所在地法院处理.</td>

            <td style="border-top:0px;vertical-align:text-top;text-align:left;padding-left:5px;">记账方式:<br />{{
        sellForm.state }}
            </td>
            <td style="border-top:0px;vertical-align:text-top;text-align:left;padding-left:5px;">
              制单人:<br />{{ loginUser.nickname }}</td>
            <td style="border-top:0px;vertical-align:text-top;text-align:left;padding-left:5px;width:170px;">
              收货单位经办人:(请审核无误后签字)</br></td>
          </tr>
        </tbody>
      </table>
      <div class="layui-row header-container" style="margin-top:8px;">
        <div style="width:500px; position:absolute;left:0px;top:0px;">地址:{{ loginUser.address }}</div>
        <div style="width:160px; position:absolute;left:540px;top:0px;">电话:{{ loginUser.tel }}</div>
        <div style="width:160px; position:absolute;left:772px;top:0px;">传真:{{ loginUser.fax }}</div>
      </div>
      <div class="layui-row header-container" style="margin-top:0px;">
        <div style="width:500px; position:absolute;left:0px;top:0px;">
          手机:{{ loginUser.phone3 }}&nbsp;&nbsp;{{ loginUser.phone2 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { toDateString } from 'ele-admin-pro';
import { printElement } from 'ele-admin-pro/es';
import useFormData from '@/utils/use-form-data';
import { message } from 'ant-design-vue';
import { TIME_OUT } from '@/config/damon';
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { smallToBig } from '@/lin/utils/changeCNY'

import { pageSell, getSell } from '@/api/store/sell';
import { listSellSon } from '@/api/store/sellSon';
import { useUserStore } from '@/store/modules/user';


const userStore = useUserStore();
const route = useRoute()
const router = useRouter()

// 登录用户信息
const loginUser = computed(() => userStore.info ?? {});

// 表单数据
const { form: sellForm, resetFields: sellResetFormFields } = useFormData({
  id: undefined,
  customer: '',
  vessel: '',
  selltime: '',
});

const printRef = ref(null);
const print = () => {
  printElement(printRef.value);
};

let sellSonList = reactive({ a: [] })
/* 打开打印页面 */
const sellOpenEdit = () => {
  sellResetFormFields();
  sellForm.id = route.query?.id ?? 0
  if (sellForm.id) {
    getSell(sellForm.id).then((data) => {
      Object.assign(sellForm, data ?? {});
      sellForm.supplier_val = data.supplier
    })

    listSellSon({ sellid: sellForm.id }).then((dataSon) => {
      sellSonList.a = dataSon
    })
  }
};
sellOpenEdit()

</script>
<script>
export default {
  name: 'SellPrint'
};
</script>
<style lang="less" scoped>
@import "@/assets/css/public.less";

.print {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.header-container {
  width: 991px;
  margin: 0 auto;
  height: 25px;
  line-height: 25px;
  position: relative;
}

.table {
  box-sizing: border-box;
  width: 991px;
  margin: 10px auto 0 auto;
}

.table tr td {
  text-align: center;
  border: #000000 1px solid;
  height: 25px;
  line-height: 25px;
}

.layui-fluid {
  color: #000;
  font-size: 16px;
}

.marginTop {
  margin-top: 15px;
}

.table td {
  height: 25px;
}
</style>
